<template>
  <el-row :gutter="16">
    <el-col :span="6">
      <el-card style="height: 500px">
        <div class="head-con">
          <div class="head-core">
            <el-upload
              :action="uploadUrl"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :headers="{'access_token':store.getters.getToken}"
            >
              <el-image
                class="p-img"
                v-if="headImgUrl!=null&&headImgUrl!=''&&headImgUrl.length>10"
                fit="contain"
                :src="headImgUrl"
                :preview-teleported="true"
              >
                <template #error>
                  <el-icon>
                    <Picture/>
                  </el-icon>
                </template>
              </el-image>
              <el-image
                v-else
                style="height:28px;margin-right: 10px"
                fit="contain"
                :src="noPicSrc"></el-image>
            </el-upload>
          </div>
          <span class="p-nickname">
              {{ user.nickName }}
          </span>
          <ul class="p-list-ul">
            <li>
                <span class="p-li-icon">
                    <el-icon><User/></el-icon>
                </span>
              <span class="p-li-name">
                  {{ person.position }}
                </span>
            </li>
            <li>
                <span class="p-li-icon">
                    <el-icon><School/></el-icon>
                </span>
              <span class="p-li-name">
                  {{ person.school }}
                </span>
            </li>
            <li>
                <span class="p-li-icon">
                    <el-icon><Location/></el-icon>
                </span>
              <span class="p-li-name">
                  {{ person.address }}
                </span>
            </li>
            <li>
                <span class="p-li-icon">
                    <el-icon><Tickets/></el-icon>
                </span>
              <span class="p-li-name">
                  {{ person.teaching }}
                </span>
            </li>
          </ul>
          <hr style="height:1px;border:none;border-top:1px dashed rgba(105,105,105,0.3);"/>
          <template v-for="t in tags" :key="t">
            <el-tag class="mr-2" type="info">{{ t }}</el-tag>
          </template>
        </div>
      </el-card>
    </el-col>
    <el-col :span="18">
      <el-card style="height: 500px">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="账户信息" name="User" class="demo-tab"></el-tab-pane>
        </el-tabs>
        <div class="p-input">
          <el-form
            ref="ruleFormRef"
            :model="user"
            status-icon
            :rules="rules"
            label-width="120px"
          >
            <el-form-item label="账户名" prop="username" class="p-form-item">
              <el-input v-model="user.username" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="昵称" prop="nickName" class="p-form-item">
              <el-input v-model="user.nickName" autocomplete="off"/>
            </el-form-item>
            <el-form-item label="性别" class="p-form-item">
              <el-select collapse-tags placeholder="请选择姓别" style="width: 450px;" prop="sex"
                         v-model="user.sex">
                <el-option
                  v-for="(item1,index1) in userSexDict"
                  :key="index1"
                  :label="item1.label"
                  :value="item1.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="个人描述" prop="description" class="p-form-item">
              <el-input v-model="user.description" type="textarea" autocomplete="off"
                        :autosize="{ minRows: 4, maxRows: 6 }"/>
            </el-form-item>
          </el-form>
          <el-button type="primary" style="margin-left: 120px" @click="editRow(user.id)">保存修改
          </el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>
import { noPicSrc } from '@/api/pic';
import { userSexDict } from '@/api/dict';
import {
  getCurrentInstance, onMounted, reactive, ref,
} from 'vue';
import { useStore } from 'vuex';
import type { TabsPaneContext, UploadProps } from 'element-plus';
import Request from '@/api/request/request';

// 默认选中标签页
const activeName = ref('User');

// 切换标签页时触发
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};

const store = useStore();
// 用户信息
const user = ref({});
// 展示用户信息，死数据
const person = ref({
  position: '资深教师',
  school: '柳州城市职业学院',
  address: '柳州',
  teaching: 'HTML、VUE、CSS',
});
const tags = ref(['热情', '上进', '教学经验丰富', '实践能力强']);
// 用户头像
const headImgUrl = ref<string>();
const { proxy } = getCurrentInstance();
// 上传头像地址
const uploadUrl = ref(proxy.$urls.API_URL_BACKSTAGE_USER_UPLOAD_PERSON_PHOTO);
// 表单验证规则
const rules = reactive({
  username: [
    {
      required: true,
      message: '请输入账户名',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 10,
      message: '账户名长度必须在3-10个字符之间',
      trigger: 'blur',
    },
  ],
  nickName: [
    {
      required: true,
      message: '请输入昵称',
      trigger: 'blur',
    },
    {
      min: 3,
      max: 10,
      message: '昵称长度必须在3-10个字符之间',
      trigger: 'blur',
    },
  ],
});

// 上传头像方法
const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile,
) => {
  headImgUrl.value = URL.createObjectURL(uploadFile.raw!);
  // 获取当前登录账户信息，并存储到vuex
  store.dispatch('getAdmin');
  store.state.loginUser.headImgUrl = headImgUrl.value;
};

// 编辑单行记录
// const editRow = async (id: number) => {
//   // 读取要编辑的信息，如果不考虑实时性可以直接将row对象传入编辑表单
//   const resData = await new proxy.$Request(`${proxy.$urls.API_URL_BACKSTAGE_LOGINUSER}/${id}`).get();
//   // const resData:any = await new Request(`${proxy.$urls.API_URL_BACKSTAGE_USER_MANAGE}/${id}`).put();
//   if (resData.success) {
//     console.log(user.value);
//     user.value = resData.data;
//     user.value = store.state.loginUser;
//     // 获取当前登录账户信息，并存储到vuex
//     await store.dispatch('getAdmin');
//     console.log(user.value);
//   }
// };

onMounted(async () => {
  // 获取当前登录账户信息，并存储到vuex
  await store.dispatch('getAdmin');
  user.value = store.getters.getLoginUser;
  headImgUrl.value = store.getters.getLoginUser.headImgUrl;
});
</script>

<style scoped>

/*定义左边用户信息展示框的宽高*/
.head-con {
  width: 100%;
  height: 100%;
}

/*设置用户头像，并使其居中显示*/
.head-core {
  width: 30%;
  height: 35%;
  margin: 0 auto;
}

/*设置用户头像呈圆角，并加鼠标移上事件*/
.p-img {
  border-radius: 50%;
  cursor: pointer;
}

/*设置用户昵称样式*/
.p-nickname {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.3em;
}

/*设置用户信息样式*/
.p-list-ul {
  width: 100%;
  margin-top: 30px;
  padding: 0;
  display: inline-block;
}

.p-list-ul li {
  list-style: none;
  margin-top: 10px;
}

.p-li-icon {
  margin-right: 20px;
}

.p-li-name {
  font-size: 0.9em;
  height: 40px;
}

/*设置用户个人标签展示样式*/
.mr-2 {
  margin-right: 10px;
}

.p-input {
  margin-top: 2%;
}

.p-form-item {
  margin-top: 3%;
  width: 500px;
}

/*设置右边标签页样式*/
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 45px;
  font-weight: 600;
}
</style>
